<template>
    <div>
        <a-modal title="转办" centered v-model:visible="visible" :width="600" okText="保存" @ok="handleSave" @cancel="handleCancel">
            <a-form layout="inline" :model="form">
                <a-row>
                    <a-col :span="20">
                        <a-form-item label="选择负责人" :span="24" name="agentUserName">
                            <div>
                                <h-search-select-cell
                                    :default-value="form.agentUserName"
                                    type="zhuanbanSystemManager"
                                    label="empName"
                                    :searchQuery="{ catalogCode: +detail.pmpProductDetailDTO.catalogCode }"
                                    @success="handleSelectChange"
                                />
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import { HSearchSelectCell } from '@/components';
interface State {
    form: {
        agentUserName: string;
        agentUser: string;
    };
    detail: any;
    visible: boolean;
}
export default defineComponent({
    components: {
        HSearchSelectCell
    },
    emits: ['success'],
    setup(_, { emit }) {
        const state = reactive<State>({
            form: {
                agentUserName: '',
                agentUser: ''
            },
            detail: {},
            visible: false
        });
        const open = (detail) => {
            state.detail = detail;
            state.visible = true;
        };
        const handleSave = async () => {
            handleCancel();
            emit('success', state.form);
        };
        const handleCancel = () => {
            state.visible = false;
        };
        const handleSelectChange = (val) => {
            state.form.agentUserName = val ? val.empName : '';
            state.form.agentUser = val ? val.empId : '';
        };
        return {
            ...toRefs(state),
            open,
            handleSave,
            handleCancel,
            handleSelectChange
        };
    }
});
</script>

<style scoped></style>
